<template>
	<div style=" position: absolute;width: 100%;height: 100%;" class="bei-1">
		<div id="app">
			<div id="login_container1">
			
				<div id="login_boxs1">
					<!-- 头像 -->
	
					<div id="avatar_boxs1">
					
					</div>
					<!-- 登录表单区域 -->
					<Form  label-width="100px" id="login_form1">
						<h2 style="text-align: center;margin-bottom: 20px;">登录</h2>
	
						<div style="text-align: center;">
							<Input v-model="username" placeholder="邮箱或用户名" clearable style="width: 280px;"></Input>
							<Input type="password" v-model="password" placeholder="密码" clearable style="width: 280px;margin-bottom: 30px;"></Input>
						</div>
	
						<Checkbox >7天内保持登录</Checkbox>
	
						<p style="margin-top: 10px; color: #f0b453;">忘记密码?</p>
	
						<Button type="primary"  @click="Login" style="width: 100%; background-color: #f0b453; color: #FFF; border-color: #f0b453; margin-top: 20px;">
							登录
						</Button>
	
						<div style="float: left; width: 100%; margin-top: 20px;">
							<a style="width: 30px;color: #f0b453;">注册</a>
						</div>
	
					</Form>
				</div>
			</div>
		</div>
	</div>
	
	<!-- <div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff;background: #5b6270;width: 100%;height: 90vh;">
		<div class="login-box">
			<h2>Seafile私有云登录</h2>
			<form>
				<div class="user-box">
					<input type="text" name="" required="" v-model="username">
					<label>用户名</label>
				</div>
				<div class="user-box">
					<input type="password" name="" required="" v-model="password">
					<label>密码</label>
				</div>
				<a href="#" @click="Login">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					登录
				</a>
			</form>
		</div>
		<div style="">
		</div>
	</div> -->
</template>
<script>
	var fs = require('fs');
	export default {
		data() {
			return {
				username: '199990913@qq.com',
				password: 'zxc123456',
				arr:[]
			}
		},
		mounted() {
			// 读取配置文件 已经保存的Seafile账号
            fs.readFile('./Seafile.ini', 'utf-8', (err, data)=> {
                if (err) {
                    throw err;
                }
                // 读取配置文件 并转换成json数组
               var arrjson = eval(data)
                this.arr = arrjson
                console.log(this.arr)
            });

			// // 判断用户是否已经登录
			// var Token = window.localStorage.getItem('Token')
			// if(Token != null ){
			// 	this.$router.push("/Seafile_Home")
			// }
		},
		methods: {
			Login() {
				const axios = require('axios')
				axios.post('https://cloud.seafile.com/api2/auth-token/', { // 网址
					username: this.username, // 参数
					password: this.password
				}).then(res => {
					if (res.status = 200) {
						window.localStorage.setItem('Token', res.data.token)
						// this.$router.push('/Seafile_Home')



					axios({
						url:'https://cloud.seafile.com/api2/account/info/',
						methods:'get',
						headers: {
            				Authorization: "Token " + res.data.token,
          					Accept: " application/json; indent=4"
         				 }
					}).then((res)=>{
						res.data['token'] = window.localStorage.getItem('Token')
						this.arr =  this.arr.concat(res.data)
						console.log(this.arr)
						// 将NFS数组转换成字符串
           			 // 写入Seafile.ini 配置文件中
           		 console.log(JSON.stringify(this.arr))
           		 fs.writeFile('./Seafile.ini', JSON.stringify(this.arr), (err)=> {
           	     if (err) {
           	         throw err;
					}
					this.$Message.success('添加用户'+res.data.name+'成功');
					this.$router.push('/Seafile_User')
          		      console.log('添加用户成功');
          		 	 });

					})

					}
				}, req => {
					return  this.$Message.error('登录失败，请检查账号密码是否错误！')
				})

			}
		}
	}
</script>
<style>
	#login_container1 {
		background-color: #2b4b6b;
		height: 100%;
	}
	
	#login_boxs1 {
		width: 400px;
		height: 370px;
		background-color: #fff;
		border-radius: 3px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	
		#avatar_boxs1{
			height: 32px;
			width: 130px;
			background-image: url(../../assets/img/seafile-logo.png);
			background-size: 100%;
			margin-top: -30px;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
	
			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #eee;
			}
		}
	}
	
	#login_form1 {
		height: 350px;
		bottom: 0;
		width: 100%;
		padding: 0 60px;
		margin-top:20px;
		box-sizing: border-box;
	}
	
	.bei-1 {
		background-image: url(../../assets/img/login-bg.jpg);
	}
	
	/* .login-box {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 400px;
		padding: 40px;
		transform: translate(-50%, -50%);
		background: rgba(0, 0, 0, .5);
		box-sizing: border-box;
		box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
		border-radius: 10px;
	}

	.login-box h2 {
		margin: 0 0 30px;
		padding: 0;
		color: #fff;
		text-align: center;
	}

	.login-box .user-box {
		position: relative;
	}

	.login-box .user-box input {
		width: 100%;
		padding: 10px 0;
		font-size: 16px;
		color: #fff;
		margin-bottom: 30px;
		border: none;
		border-bottom: 1px solid #fff;
		outline: none;
		background: transparent;
	}

	.login-box .user-box label {
		position: absolute;
		top: 0;
		left: 0;
		padding: 10px 0;
		font-size: 16px;
		color: #fff;
		pointer-events: none;
		transition: .5s;
	}

	.login-box .user-box input:focus~label,
	.login-box .user-box input:valid~label {
		top: -20px;
		left: 0;
		color: #03e9f4;
		font-size: 12px;
	}

	.login-box form a {
		position: relative;
		display: inline-block;
		padding: 10px 20px;
		color: #03e9f4;
		font-size: 16px;
		text-decoration: none;
		text-transform: uppercase;
		overflow: hidden;
		transition: .5s;
		margin-top: 40px;
		letter-spacing: 4px
	}

	.login-box a:hover {
		background: #03e9f4;
		color: #fff;
		border-radius: 5px;
		box-shadow: 0 0 5px #03e9f4,
			0 0 25px #03e9f4,
			0 0 50px #03e9f4,
			0 0 100px #03e9f4;
	}

	.login-box a span {
		position: absolute;
		display: block;
	}

	.login-box a span:nth-child(1) {
		top: 0;
		left: -100%;
		width: 100%;
		height: 2px;
		background: linear-gradient(90deg, transparent, #03e9f4);
		animation: btn-anim1 1s linear infinite;
	}

	@keyframes btn-anim1 {
		0% {
			left: -100%;
		}

		50%,
		100% {
			left: 100%;
		}
	}

	.login-box a span:nth-child(2) {
		top: -100%;
		right: 0;
		width: 2px;
		height: 100%;
		background: linear-gradient(180deg, transparent, #03e9f4);
		animation: btn-anim2 1s linear infinite;
		animation-delay: .25s
	}

	@keyframes btn-anim2 {
		0% {
			top: -100%;
		}

		50%,
		100% {
			top: 100%;
		}
	}

	.login-box a span:nth-child(3) {
		bottom: 0;
		right: -100%;
		width: 100%;
		height: 2px;
		background: linear-gradient(270deg, transparent, #03e9f4);
		animation: btn-anim3 1s linear infinite;
		animation-delay: .5s
	}

	@keyframes btn-anim3 {
		0% {
			right: -100%;
		}

		50%,
		100% {
			right: 100%;
		}
	}

	.login-box a span:nth-child(4) {
		bottom: -100%;
		left: 0;
		width: 2px;
		height: 100%;
		background: linear-gradient(360deg, transparent, #03e9f4);
		animation: btn-anim4 1s linear infinite;
		animation-delay: .75s
	}

	@keyframes btn-anim4 {
		0% {
			bottom: -100%;
		}

		50%,
		100% {
			bottom: 100%;
		}
	} */
</style>
